<script>
import axios from "axios";

export default {
  name: "updateDialog",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        id: null,
        departmentName: "",
        staffCount: "",
        intro: ""
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    sendDataParent:function (){
      console.log("执行取消")
      console.log(this.$emit)
      this.$emit('closeDialog', false);
    },
    updateData(){
      axios.put("http://localhost:8088/departments",this.form).then(
        function (res){
          console.log("请求成功")
          console.log(res.data)
        },
        function (error){
          console.log("请求失败")
        }
      )
      this.$emit('closeDialog', false);
      this.$emit('refresh', true);
    }
  },
  props: ['dialogFormShow','rowData'],
  created() {
    console.log("修改页面初始化")
    console.log("选中列数据"+this.rowData)
  },
  mounted() {
    console.log("选中列数据"+this.rowData)
  },
  activated(){
    console.log("组件激活")
  },
  watch:{
    rowData(data){
      console.log("执行观察")
      this.form = data
      console.log("观察结束")
    }
  }
}
</script>

<template>
  <el-container>
    <el-dialog title="新增部门" :visible.sync="dialogFormShow" @close="sendDataParent">
      <el-form :model="form">
        <el-input type="hidden" v-model="form.id"></el-input>
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="form.departmentName"></el-input>
        </el-form-item>
        <el-form-item label="部门人数" :label-width="formLabelWidth">
          <el-input v-model="form.staffCount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" :label-width="formLabelWidth">
          <el-input v-model="form.intro" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sendDataParent">取 消</el-button>
        <el-button type="primary" @click="updateData">确 定</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<style scoped>

</style>
